<template>
  <div>
    <MSearchTree
      :data="data"
      :fields="fields"
      @nodeClick="nodeClick"
    ></MSearchTree>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineOptions({
  name: 'DemoCpnsMSearchTree'
})

const fields = ref({
  label: 'name',
  children: 'children'
})

const data = ref([
  {
    id: 1,
    name: 'Level one 1',
    children: [
      {
        id: 4,
        name: 'Level two 1-1',
        children: [
          {
            id: 5,
            name: 'Level two 1-1-1'
          }
        ]
      },
      {
        id: 6,
        name: 'Level two 1-2',
        children: [
          {
            id: 7,
            name: 'Level two 1-2-1'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: 'Level one 2'
  }
])
const selectNode = ref<any>({})
const nodeClick = (node: Object) => {
  selectNode.value = node
  console.log(selectNode.value.id)
}
</script>

<style lang="scss" scoped></style>
